<!DOCTYPE html>
{% extends "base.html" %}

{% block title %}我的收藏{% endblock %}

{% block head %}
    <style>
        h{
            position: absolute;
            color: #8D8D8D;
            top: 30%;
            left: 40%;
            font-style: italic;
            font-size: 100px;
        }
        div{
            line-height: 3;
        }
        #texts{
            padding-left: 20px;
            background-color: #E6E6E6;
            white-space: pre-wrap;


        }

        pre{
            border: 1px solid #ccc;
            padding: 5px;
            background: #eeeeee;
            color: #004088;
            overflow: auto;
            font-family: Consolas ;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div>
                <ul class="layui-nav layui-nav-tree " id="nav" lay-filter="test">
                </ul>
            </div>
        </div>
    </div>

    <div ID="texts" class="layui-body">

        <h>Learn</h>
    </div>

    <div class="layui-footer">
        <button id="collect" type="button" class="layui-btn" onclick="collect_func()">收藏</button>
    </div>
{% endblock %}

{% block script %}
    <script>
        var informationcode
        var title
        var $ = layui.jquery
        var element = layui.element;
        var layer = layui.layer;
        !function() {
            var layFilter = $('#nav').attr('lay-filter');
            document.getElementById("collect").classList.add("layui-btn-disabled")
            $.ajax({
                url: "/api/collect/list",
                async: true,
                type: "GET",
                data: {"collectType":"3"},
                success: function (where) {
                    if (where.code === "200") {
                        $("#nav").find('span.layui-nav-bar').remove();
                        $.each(where.data, function (i, value) {
                            var title_id = value.informationID;
                            var what = value.title;
                            var $li = "<li class='layui-nav-item'> <a href='javascript:;' data-id=" + title_id + ">" + what + "</a></li>";
                            $("#nav").append($li);
                        })
                        element.render('nav', layFilter);
                    } else if (where.code === "2002"){
                        alert("无收藏信息")
                    } else {
                        alert("查询失败!")
                    }
                },
                error: function (res) {
                    alert("请求失败！" + res.status)
                }
            })


            element.on('nav',function(elem) {
                var id = elem.attr('data-id');
                !function () {
                    var index = layer.load(1);
                    $.ajax({
                        url: "/api/collect",
                        async: true,
                        type: "get",
                        data: {"informationID": id},
                        success: function (message) {
                            if (message.code === "200") {
                                informationcode = message.data.informationID
                                title = message.data.title
                                var ss = message.data.text;
                                var whats = eval(ss);
                                var html = "";
                                for (var i = 0; i < whats.length; i++) {
                                    html += "<" + whats[i][0] + ">" + whats[i][1] + "</" + whats[i][0] + ">";
                                }
                                document.getElementById('texts').innerHTML = html;
                                document.getElementById("collect").classList.remove("layui-btn-disabled")
                                $.ajax({
                                    url: "/api/collect",
                                    type: "get",
                                    async: true,
                                    data: {"informationID": informationcode, "collectType": 3},
                                    success: function (ifcollect) {
                                        if (ifcollect.code === "200") {
                                            document.getElementById("collect").innerHTML = "取消收藏"
                                        } else {
                                            document.getElementById("collect").innerHTML = "收藏"
                                        }
                                    },
                                    error: function (res) {
                                        alert("请求失败！" + res.status)
                                    }
                                })
                            }
                            layer.close(index);
                        }
                    })
                    $.ajax({
                        url: "/api/collect/list",
                        type: "get",
                        async: true,
                        data: {"informationID": informationcode, "collectType": 3},
                        success: function (ifcollect) {
                            if (ifcollect.code === "200") {
                                document.getElementById("collect").innerHTML = "取消收藏"
                            } else {
                                document.getElementById("collect").innerHTML = "收藏"
                            }
                        },
                        error: function (res) {
                            alert("请求失败！" + res.status)
                        }
                    })
                }()
            })
        }()
        function collect_func() {
            var temp = document.getElementById("collect").textContent
            if(temp === "收藏"){
                $.ajax({
                    url: "/api/collect",
                    type: "POST",
                    async: true,
                    data: {
                        "informationID": informationcode,
                        "title": title
                    },
                    success: function (endcollect) {
                        if (endcollect.code === "200") {
                            alert(endcollect.msg)
                            document.getElementById("collect").innerHTML="取消收藏"
                        } else {
                            alert("收藏失败!")
                        }
                    },
                    error: function (res) {
                        alert("请求失败！" + res.status)
                    }

                })
            }
            else {
                $.ajax({
                    url: "/api/collect",
                    type: "DELETE",
                    async: true,
                    data: {
                        "informationID": informationcode,
                    },
                    success: function (killcollect) {
                        if (killcollect.code === "200") {
                            alert(killcollect.msg)
                            document.getElementById("collect").innerHTML="收藏"
                        } else {
                            alert("取消收藏失败!")
                        }
                    },
                    error: function (res) {
                        alert("请求失败！" + res.status)
                    }

                })
            }
        }
    </script>

{% endblock %}